<template>
  <div>
    <div style="background-color: #665537">
      <div class="crumbs-nav" @click="fun()">猫眼电影>{{ arr.name }}</div>
      <br />
      <div style="display: flex">
        <div class="movie-cover"><img :src="arr.img" alt="" /></div>
        <div class="movie-desc">
          <h1>{{ arr.name }}</h1>
          <ul>
            <li>{{ arr.engname }}</li>
            <li>{{ arr.miaoshu }}</li>
            <li>{{ arr.star }}</li>
            <li>{{ arr.systr }} 中国大陆上映/{{ arr.filmdate }}</li>
          </ul>
          <button><i class="iconfont icon-xin"></i>想看</button
          >&nbsp;&nbsp;&nbsp;&nbsp;<button>
            <i class="iconfont icon-xingxing"></i>看过
          </button>
        </div>
      </div>
      <div class="real-time">
        <h1><i class="iconfont icon-xiaochou"></i>猫眼购票评分</h1>
        <span>405780 人想看</span
        ><span
          @click="$router.push(`/movieAnalyse?img=${arr.img}&name=${arr.name}`)"
          >29689566人看过></span
        >
        <img src="../hys/img/1.3.png" alt="" @click="fun2()" />
        <div class="awardBottom">
          <h2>
            <i class="iconfont icon-dianzan"></i
            >&nbsp;&nbsp;&nbsp;2021年华语动作片票房冠军
          </h2>
        </div>
      </div>
      <div class="jianjie">
        <h1>简介</h1>
        <h5>展开<i class="iconfont icon-down"></i></h5>
        <br />
        <br />
        <p>{{ arr.jianjie }}</p>
      </div>
    </div>
    <xzo></xzo>
    <xzt></xzt>
    <xzj></xzj>
    <duanping></duanping>
    <piao></piao>
    <div class="buy-ticket-btn">
      <div class="buy-wrapper">
        <i class="iconfont icon-fenxiang1"></i>
        <a class="goto-ticket" @click="Ticket()">特惠购票</a>
      </div>
    </div>
  </div>
</template>
<script>
import Duanping from "./duanping.vue";
import Piao from "./piao.vue";
import Xzj from "./xzj.vue";
import xzo from "./xzo.vue";
import Xzt from "./xzt.vue";
import getdata from "@/api/getdata";

export default {
  components: { xzo, Xzt, Xzj, Duanping, Piao },
  methods: {
    fun() {
      this.$router.push("/home/movie");
    },
    fun2() {
      this.$router.push("/boardAll");
    },
    Ticket() {

      this.$router.push({path:"/hon",query:{sd:this.$route.query.dd}});
    },
  },
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    getdata("/apidl/addr/selectActorsOne", {
      id: this.$route.query.sd ? this.$route.query.sd : this.$route.query.dd,
    }).then((res) => {
      this.arr = res.data;
      window.sessionStorage.setItem(
        "detailImageName",
        JSON.stringify(this.arr)
      );
    });
  },
};
</script>
<style scoped>
.crumbs-nav {
  color: #ccc;
  padding-top: 0.3rem;
  padding-left: 0.3rem;
  font-size: 0.35rem;
}
.movie-cover img {
  width: 2rem;
  margin-left: 0.3rem;
}
.movie-desc {
  margin-left: 0.3rem;
}
.movie-desc h1 {
  font-size: 0.4rem;
  color: seashell;
  font-weight: bold;
}
.movie-desc li {
  font-size: 0.24rem;
  color: silver;
  line-height: 0.4rem;
}
.movie-desc button {
  margin-top: 0.15rem;
}
.real-time {
  margin-left: 0.3rem;
  background-color: rgba(221, 211, 211, 0.18);
  border-radius: 0.16rem;
  margin-top: 0.3rem;
  padding: 0.18rem 0.2rem 0.2rem 0;
  margin-right: 0.3rem;
}
.real-time h1 {
  color: white;
  font-weight: bold;
  float: left;
  margin-left: 0.2rem;
}
.real-time span {
  padding-left: 0.4rem;
  color: silver;
  font-size: 0.25rem;
}
.real-time img {
  margin-left: 0.2rem;
  width: 6.5rem;
  margin-top: 0.2rem;
}
.awardBottom {
  margin-top: 0.14rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0.12rem;
  padding: 0 0.1rem 0 0.22rem;
  margin-left: 0.2rem;
  height: 0.6rem;
}
.awardBottom h2 {
  color: snow;
  padding-top: 0.1rem;
}
.jianjie {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-top: 0.3rem;
  color: white;
}
.jianjie h1 {
  font-size: 0.35rem;
  font-weight: 800;
  float: left;
}
.jianjie h5 {
  float: right;
}
.jianjie p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-height: 0.4rem;
}

/* 底部 */
.buy-ticket-btn {
  background-color: #fff;
  height: 1.2rem;
  width: 100%;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  overflow: hidden;
  margin: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 10;
}
.buy-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.buy-wrapper i {
  margin-left: 0.48rem;
  margin-right: 0.6rem;
  width: 0.38rem;
  height: 0.38rem;
  font-weight: 900;
  font-size: 0.4rem;
}
.goto-ticket {
  flex: 1;
  height: 0.88rem;
  background-image: linear-gradient(-90deg, #fb3333, #ff5269);
  box-shadow: 0 0.06rem 0.12rem 0 rgb(251 51 51 / 30%);
  border-radius: 0.5rem;
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
  line-height: 0.88rem;
  margin: 0 0.2rem;
}
</style>